<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* specific to the demo image */
      .demo-image {
        width: 45vw;
        aspect-ratio: 3/4;
        background: url(1.jpg);
        background-size: cover;
      }

      /* needed for the pseudo-elements and old-photo effect */
      .old-style-photo {
        position: relative;
        filter: grayscale(1) blur(1px) contrast(1.2) sepia(1) blur(0.25px);
        -webkit-mask: radial-gradient(#000, #000a);
      }
      .old-style-photo::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-mask: radial-gradient(farthest-side, #0000 30%, #000);
        backdrop-filter: blur(5px) sepia(90%);
      }
    </style>
  </head>
  <body>
    link: https://levelup.gitconnected.com/old-photo-effect-with-css-54f5be9912b

    <div class="old-style-photo demo-image"></div>
  </body>
</html>
